/* eslint-disable no-useless-concat */
import React, {PureComponent} from 'react';
import {Table, Card, Row, Col} from 'antd';
import PropTypes from 'prop-types';
import moment from 'moment';
import {
    TABLE,
    COMMON_TABLE_QUERY_FAIL_TEXT,
    COMMON_TABLE_EMPTY_TEXT} from '../constants';
import {addMonths, polylinelist} from './utils';
import {injectIntl, formatMessage} from './intl';
import {isYesNo, reportFormList} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {Chart, Geom, Axis, Tooltip, Label, Legend} from 'bizcharts';
const yearMouth = moment(new Date()).format('YYYY-MM');
export class TableAmount extends PureComponent {
    state = {
        loading: false
    };
    render() {
        const {conditions, data, loading, hasError} = this.props;
        const content = polylinelist(conditions.linkRatioTime, data, yearMouth);
        const columns = [{
            title: formatMessage({
                id: 'tableApprove.column.sernum',
                defaultMessage: '序号'
            }),
            dataIndex: 'sernum',
            render: (t, d, i) => i + 1
        }, {
            title: formatMessage({
                id: 'tableApprove.column.region',
                defaultMessage: '区域'
            }),
            dataIndex: 'region'
        }, {
            title: formatMessage({
                id: 'tableApprove.column.dealerCode',
                defaultMessage: '总代'
            }),
            dataIndex: 'dealerCode'
        }, {
            title: formatMessage({
                id: 'tableApprove.column.market',
                defaultMessage: '市场'
            }),
            dataIndex: 'market'
        }];
        if(conditions.linkRatioTime === 1)
            columns.push({
                title: addMonths(10, yearMouth),
                dataIndex: 'n1MonthNumber',
            }, {
                title: addMonths(9, yearMouth),
                dataIndex: 'n2MonthNumber',
            }, {
                title: addMonths(8, yearMouth),
                dataIndex: 'n3MonthNumber',
            }, {
                title: addMonths(7, yearMouth),
                dataIndex: 'n4MonthNumber'
            }, {
                title: addMonths(6, yearMouth),
                dataIndex: 'n5MonthNumber'
            }, {
                title: addMonths(5, yearMouth),
                dataIndex: 'n6MonthNumber'
            }, {
                title: addMonths(4, yearMouth),
                dataIndex: 'n7MonthNumber'
            }, {
                title: addMonths(3, yearMouth),
                dataIndex: 'n8MonthNumber'
            }, {
                title: addMonths(2, yearMouth),
                dataIndex: 'n9MonthNumber'
            }, {
                title: addMonths(1, yearMouth),
                dataIndex: 'n10MonthNumber'
            }, {
                title: addMonths(0, yearMouth),
                dataIndex: 'n11MonthNumber'
            }, {
                title: addMonths(-1, yearMouth),
                dataIndex: 'n12MonthNumber'
            });
        else if(conditions.linkRatioTime === 2)
            columns.push({
                title: addMonths(4, yearMouth),
                dataIndex: 'n1MonthNumber'
            }, {
                title: addMonths(3, yearMouth),
                dataIndex: 'n2MonthNumber'
            }, {
                title: addMonths(2, yearMouth),
                dataIndex: 'n3MonthNumber'
            }, {
                title: addMonths(1, yearMouth),
                dataIndex: 'n4MonthNumber'
            }, {
                title: addMonths(0, yearMouth),
                dataIndex: 'n5MonthNumber'
            }, {
                title: addMonths(-1, yearMouth),
                dataIndex: 'n6MonthNumber'
            });
        else
            columns.push({
                title: addMonths(1, yearMouth),
                dataIndex: 'n1MonthNumber'
            }, {
                title: addMonths(0, yearMouth),
                dataIndex: 'n2MonthNumber'
            }, {
                title: addMonths(-1, yearMouth),
                dataIndex: 'n3MonthNumber'
            });
        const locale = {
            emptyText: hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
        };
        return (
            <Card>
                {conditions.reportForm === reportFormList.索赔单据量 && conditions.linkRatio === isYesNo.是 && <div>
                    <Table
                        className="white-space-nowrap"
                        columns={columns}
                        dataSource={data}
                        rowKey="id"
                        pagination={false}
                        loading={loading || this.state.loading}
                        locale={locale}
                        {...TABLE}/>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={12}>
                            {formatMessage({
                                id: 'tableApprove.table.billAmountData',
                                defaultMessage: '索赔单据量-环比'
                            })}</Col></Row>}>
                            {content && content.length > 0 && <Chart
                                style={{fontSize: '12'}}
                                padding={['5%', '6%', '18%']}
                                height={400} data={content} scale={{month: {range: [0, 1]}}} forceFit>
                                <Legend textStyle={{
                                    fill: '#404040', // 文本的颜色
                                    fontSize: '14', // 文本大小
                                }}/>
                                <Axis name="month" label={{textStyle: {
                                    fill: '#404040', // 文本的颜色
                                    fontSize: '14', // 文本大小
                                }}}/>
                                <Axis
                                    name="value"
                                    label={{
                                        textStyle: {
                                            fill: '#404040', // 文本的颜色
                                            fontSize: '14', // 文本大小
                                        }
                                    }}/>
                                <Tooltip
                                    crosshairs={{type: 'y'}}/>
                                <Geom type="line" position="month*value" size={2} color={['year', ['#6A8ECA', '#E97E30']]}>
                                    <Label
                                        offset={15}
                                        content="value"
                                        textStyle={{
                                            fill: '#404040',
                                            textAlign: 'center',
                                            fontSize: '14', // 文本大小
                                        }}
                                        position="start"/>
                                </Geom>
                                <Geom
                                    type="point"
                                    position="month*value"
                                    size={4}
                                    shape={'circle'}
                                    color={['year', ['#6A8ECA', '#E97E30']]}
                                    style={{
                                        stroke: '#fff',
                                        lineWidth: 1,
                                    }}/>
                            </Chart>}
                        </DescriptionList>
                    </Card>
                </div>}
            </Card>
        );
    }
}

TableAmount.propTypes = {
    conditions: PropTypes.object.isRequired,
    data: PropTypes.array.isRequired,
    hasError: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    content: PropTypes.array,
    intl: PropTypes.object,
};
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getData = selectorFactory(['page', 'domainData', 'list', 'data']);
const getConditions = selectorFactory(['page', 'appState', 'queryCondition']);
const mapStateToProps = state => ({
    data: getData(state),
    conditions: getConditions(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    hasError: state.getIn(['page', 'domainData', 'list', 'hasError']),
});

import {connect} from 'react-redux';
export default connect(mapStateToProps, null)(injectIntl(TableAmount));
